/*
 * @Author: your name
 * @Date: 2021-06-01 09:40:03
 * @LastEditTime: 2021-06-01 15:51:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Node阶段实战\初始代码\后台初始代码\assets\js\login.js
 */

// let form = layui.form;
$('form').submit(function (e) {
  e.preventDefault();
  let fd = $(this).serialize();
  $.ajax({
    type: 'post',
    url: '/api/login',
    data: fd,
    success: function (res) {
      //console.log(res);
      // 登录成功后，跳转到主页面
      if (res.status === 0) {
        // 把登录成功的标志位存储在客户端
        localStorage.setItem('mytoken', res.token)
        // 跳转到主页面
        location.href = './index.html'
      } else {
        // 登录失败
        layer.msg(res.message)
      }
    }
  })
})

window.requestAnimationFrame = (function () {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function (callback) {
      window.setTimeout(callback, 1000 / 2);
    };
})();
var myCanvas = document.getElementById("canvas");
var ctx = myCanvas.getContext("2d");//getContext 设置画笔
var num;
var w, h;
var duixiang = [];
var move = {};
function widthheight() {
  w = myCanvas.width = window.innerWidth;
  h = myCanvas.height = window.innerHeight;
  num = Math.floor(w * h * 0.00028);//点的数量。根据屏幕大小确定
  for (var i = 0; i < num; i++) {
    duixiang[i] = {
      x: Math.random() * w,
      y: Math.random() * h,
      cX: Math.random() * 0.6 - 0.3,
      cY: Math.random() * 0.6 - 0.3,
      R: Math.floor(Math.random() * 5) + 2,
      //CC:Math.floor(Math.random()*3)+2,
      r: Math.floor(Math.random() * 254),
      g: Math.floor(Math.random() * 254),
      b: Math.floor(Math.random() * 254)
    }
    // console.log(duixiang[i])
    Cricle(duixiang[i].x, duixiang[i].y, duixiang[i].R, duixiang[i].r, duixiang[i].g, duixiang[i].b);
    //Cricle(duixiang[i].x,duixiang[i].y,duixiang[i].R,duixiang[i].CC);
  }
}; widthheight();//获取浏览器的等宽度等高

function Cricle(x, y, R, r, g, b) {
  ctx.save();//保存路径
  if (Math.random() > 0.991) { ctx.globalAlpha = 0.9; }//ctx.fillStyle = "#CCC";}//填充的背景颜色
  else { ctx.globalAlpha = 0.47; }

  ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
  ctx.beginPath();//开始绘画
  ctx.arc(x, y, R, Math.PI * 2, 0);//绘画圆 x y 半径（大小） 角度  一个PI 是180 * 2 = 360    真假 0/1 true/false
  ctx.closePath();//结束绘画
  ctx.fill();//填充背景颜色
  ctx.restore();//回复路径
}; Cricle();


!function draw() {
  ctx.clearRect(0, 0, w, h)//先清除画布上的点
  for (var i = 0; i < num; i++) {
    duixiang[i].x += duixiang[i].cX;
    duixiang[i].y += duixiang[i].cY;
    if (duixiang[i].x > w || duixiang[i].x < 0) {
      duixiang[i].cX = -duixiang[i].cX;
    }
    if (duixiang[i].y > h || duixiang[i].y < 0) {
      duixiang[i].cY = -duixiang[i].cY;
    }
    Cricle(duixiang[i].x, duixiang[i].y, duixiang[i].R, duixiang[i].r, duixiang[i].g, duixiang[i].b);
    //勾股定理判断两点是否连线
    for (var j = i + 1; j < num; j++) {
      if ((duixiang[i].x - duixiang[j].x) * (duixiang[i].x - duixiang[j].x) + (duixiang[i].y - duixiang[j].y) * (duixiang[i].y - duixiang[j].y) <= 55 * 55) {
        line(duixiang[i].x, duixiang[i].y, duixiang[j].x, duixiang[j].y, 0, i, j)
      }
      if (move.x) {
        if ((duixiang[i].x - move.x) * (duixiang[i].x - move.x) + (duixiang[i].y - move.y) * (duixiang[i].y - move.y) <= 100 * 100) {
          line(duixiang[i].x, duixiang[i].y, move.x, move.y, 1, i, 1)
        }
      }
    }
  }
  window.requestAnimationFrame(draw)
}();

//绘制线条
function line(x1, y1, x2, y2, flag, i, j) {

  if (flag) {
    var color = ctx.createLinearGradient(x1, y1, x2, y2);
    ctx.globalAlpha = 0.5;
    color.addColorStop(0, "rgb(" + duixiang[i].r + "," + duixiang[i].g + "," + duixiang[i].b + ")");
    color.addColorStop(0.8, "#019ee5");
  }
  else {

    var color = ctx.createLinearGradient(x1, y1, x2, y2);
    ctx.globalAlpha = 0.9;
    color.addColorStop(0, "rgb(" + duixiang[i].r + "," + duixiang[i].g + "," + duixiang[i].b + ")");
    color.addColorStop(1, "rgb(" + duixiang[j].r + "," + duixiang[j].g + "," + duixiang[j].b + ")");
  }
  ctx.save();
  ctx.strokeStyle = color;
  ctx.lineWidth = 0.5;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  //ctx.restore();
}


//document.onmousemove = function(e){
//   move.x = e.clientX;
//  move.y = e.clientY;
//}
//console.log(move)//去掉注释 ，可以与背景互动

window.onresize = function () {
  location.reload();
}


